<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-absolute</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
        }
        .sub {
            position: absolute;/*  在使用绝对定位之前,必须把父类的控件设置为position: relative,没有父类则不用设置*/
            width: 50px;
            height: 50px;
        }

        .tl {
            top:0;/*由于已经设置了position: absolute;那么 top left 就不表示便宜,而是表示靠离距离 下面三个控件相同*/
            left: 0;
            background: green;
        }
        .tr {
            top:0;
            right: 0;
            background: yellow;
        }
        .br {
            bottom:0;
            right: 0;
            background: black;
        }
        .bl {
            bottom:0;
            left: 0;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="sub tl"></div>
        <div class="sub tr"></div>
        <div class="sub br"></div>
        <div class="sub bl"></div>
    </div>
</body>
</html>